import {
  SoundOutlined,
  FormOutlined,
  AudioOutlined,
  VideoCameraOutlined,
  WifiOutlined,
  LaptopOutlined,
  CloseOutlined
} from "@ant-design/icons"
import './index.scss'
import Voice from './voice'
import Microphone from "./microphone"
import Camera from "./camera"
import MoRen from './moren'
import Network from './network'
import Computer from "./computer"
import { useState, useRef } from "react"
import { useNavigate } from 'react-router'

const App = () => {
  const [name, setName] = useState('')
  const [color, setcolor] = useState('')
  const changename = (name) => {
    setName(name)
    setcolor(name)
  }
  const navigate = useNavigate()

  return (
    <>

      <div className="index_big"  >
        <div className="index_while" >
          <CloseOutlined onClick={() => {
            navigate('/home')
          }} style={{ fontSize: 15 }} />
          <h3>设备检测</h3>
          <div className="index_zh">

            <div className="index_smile"

            >
              <SoundOutlined style={{ fontSize: 18 }} />
              <span
                className={color === '声音' ? 'active' : ''}
                id={'声音'}
                onClick={(e) => {
                  // console.log(e.target.id);
                  setName('声音')

                  setcolor(e.target.id)
                }}
              >声音</span>
            </div>

            <div className="index_smile"
            >
              <AudioOutlined style={{ fontSize: 18 }} />
              <span
                className={color === '话筒' ? 'active' : ''}
                onClick={() => {
                  setcolor('话筒')
                  setName('话筒')
                }}
              >话筒</span>
            </div>

            <div className="index_smile"
              >
              <VideoCameraOutlined style={{ fontSize: 18 }} />
              <span

                className={color === '摄像头' ? 'active' : ''}
                onClick={() => {
                  setcolor('摄像头')
                  setName('摄像头')

                }}>摄像头</span>
            </div>


            <div className="index_smile"
              >
              <WifiOutlined style={{ fontSize: 18 }} />
              <span
                className={color === '网络' ? 'active' : ''}
                onClick={() => {
                  setName('网络')
                  setcolor('网络')
                }}>网络</span>
            </div>

            <div className="index_smile"
            >
              <LaptopOutlined style={{ fontSize: 18 }} />
              <span
                className={color === '电脑' ? 'active' : ''}
                onClick={() => {
                  setcolor('电脑')
                  setName('电脑')

                }}>电脑</span>
            </div>
          </div>


        </div>


        {
          name === '' ? (<MoRen changename={changename} />) : ''
        }
        {
          name === '声音' ? (<Voice changename={changename} />) : ''
        }
        {
          name === '话筒' ? (<Microphone changename={changename} />) : ''
        }
        {
          name === '摄像头' ? (<Camera changename={changename} />) : ''
        }
        {
          // name === '手写板' ? (<h1 changename={changename}>手写板</h1>) : ''
        }
        {
          name === '网络' ? (<Network changename={changename} />) : ''
        }
        {
          name === '电脑' ? (<Computer changename={changename} />) : ''
        }

      </div>

    </>
  )
}
export default App